<template>
  <div>
    <h3>欢迎:{{this.$store.state.userInfo.nickname}}</h3><br><br>
    <van-cell-group inset>
      <van-cell title="用户名" :value="this.$store.state.userInfo.nickname" />
      <van-cell title="用户简介" value="内容" label="个性签名:" />
      
      <van-cell :title="'当前位置'+nowAddress" icon="location-o" />
      
      <!-- 弹出层 -->
      <van-cell is-link @click="showPopup">{{address}}</van-cell>
      <van-popup v-model="show" position="bottom">
        <!-- 地址弹出层 -->
      <van-area
        @cancel="cancel"
        @confirm="confirmFn"
        title="标题"
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
      />
      </van-popup>
    </van-cell-group>

    <van-button type="primary" block @click="quit">退出登陆</van-button>
    
  </div>
</template>

<script>
import {areaList} from '@vant/area-data'
import { createApp } from 'vue';
import { Notify } from 'vant';

export default {
  name:"UserInfo",
  data(){
    return {show:false,
      areaList, city:'请选择',
        county:'请选择',
        address:'选择地址',
        nowAddress:''
    }
  },components: {
    [Notify.Component.name]: Notify.Component,
  },
  methods: {
    showPopup(){
      this.show = !this.show;
    },
    cancel(){
      this.show = false;
    },
      confirmFn(event){
        this.show = false;
        let arr,SelectProvinceName,SelectCityName,SelectCountyName;
        arr = event;
        SelectProvinceName = arr[0].name;   // 省
        SelectCityName = arr[1].name;   // 市
        SelectCountyName = arr[2].name;  // 区
        this.city = SelectCityName;
        this.county = SelectCountyName;
        this.$emit('ProCityCountyVal',[SelectProvinceName,SelectCityName,SelectCountyName])
        console.log('点击了确定按钮',SelectProvinceName,SelectCityName,SelectCountyName)
        this.address = SelectProvinceName + " " + SelectCityName + " " + SelectCountyName;
        this.nowAddress = this.address;
      },
      quit(){
        localStorage.removeItem('userName');
        Notify('退出成功');
        setTimeout(() =>{
          this.$router.push('login');
        },1000)
        
      }
  },
  mounted(){
    if(!window.localStorage.getItem("userName")){
        this.$router.push('login');
    }
  }
 
};
</script>

<style>
</style>